@()
@main("Map-CBGD") {

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">Map</h2>
		</div>
	</div>

	<div class="row">
		<div class="form-group col-sm-6" >
			<h4>Genetic map:</h4>
			<img src="@routes.Assets.at("images/map1.png")" style="width: 100%">
		</div>
		<div class="form-group col-sm-6" style="border-left:1px solid #dddddd">
			<h4>Genetic-physical map correspondence:</h4>
			<img src="@routes.Assets.at("images/map2.png")" style="width: 100%">
		</div>
	</div>
	<hr>
	<div class="row">
		<div class="form-group col-sm-6" >
			<h4>Genetic linkage map :</h4>
			<img src="@routes.Assets.at("images/map3.png")" style="width: 100%">
		</div>
		<div class="form-group col-sm-6" style="border-left:1px solid #dddddd">
			<h4>Genome comparative map:</h4>
			<img src="@routes.Assets.at("images/map4.png")" style="width: 100%">
		</div>
	</div>

	<hr>

	<h4>select the grouping data that you want to display:</h4>
	<div id="toolbar">
		<div class="form-group" style="width: 100px;">
			<select class="form-control" name="method" onchange="change(this)">
				<option selected value="lg1">lg1</option>
				<option value="lg2">lg2</option>
				<option value="lg3">lg3</option>
				<option value="lg4">lg4</option>
				<option value="lg5">lg5</option>
				<option value="lg6">lg6</option>
				<option value="lg7">lg7</option>
				<option value="lg8">lg8</option>
				<option value="lg9">lg9</option>
				<option value="lg10">lg10</option>
				<option value="lg11">lg11</option>
			</select>
		</div>
	</div>

	<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
	data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-multiple-search="true"
	style="table-layout: fixed;
		word-wrap: break-word"
	>
		<thead>
			<tr>
				<th data-field="marker" data-sortable="true">Marker</th>
				<th data-field="geneticDistance" data-sortable="true">Genetic Distance</th>
			</tr>
		</thead>
	</table>

	<script>
			$(function () {
				$.ajax({
					url: "@routes.GeneticMapController.getAllGeneticMapsByGroup("lg1")",
					type: "get",
					dataType: "json",
					success: function (data) {
						$('#table').bootstrapTable({
							data: data
						});
					}
				})
			})

			function change(element) {
				var value = $(element).find(">option:selected").val()
				$.ajax({
					url: "getAllGeneticMapsByGroup?name="+value,
					type: "get",
					dataType: "json",
					success: function (data) {
						$('#table').bootstrapTable("load", data);
					}
				})

			}

	</script>
}